<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="recommend-shop-page min-h-screen bg-gray-50 pb-20">
    <view
      class="sticky top-0 z-10 bg-gradient-to-r from-orange-600 to-orange-400 text-white p-4 flex items-center justify-between"
    >
      <view class="p-1" @click="goBack">
        <ChevronLeft class="w-5 h-5" />
      </view>
      <view class="text-base font-medium">推荐好店</view>
      <view class="w-5"></view>
    </view>

    <view class="p-4 bg-white">
      <view class="bg-orange-50 p-4 rounded-lg border border-orange-100">
        <view class="text-sm text-gray-600 leading-relaxed">
          感谢您为上饶吃喝玩乐榜单提供推荐！您的建议将由我们的专业评审团队进行审核和探访，优质商家将有机会登上榜单。
        </view>
      </view>
    </view>

    <view class="p-4 bg-white mt-2">
      <view class="text-lg font-medium text-gray-800 mb-4">填写推荐信息</view>

      <form @submit.prevent="submitRecommendation" class="space-y-4">
        <view class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">
            商家类别
            <text class="text-red-500">*</text>
          </label>
          <view class="grid grid-cols-4 gap-2">
            <view
              v-for="(classification, index) in categories"
              :key="classification.id"
              type="view"
              class="py-2 px-1 rounded-lg text-sm text-center transition-colors"
              :class="
                form.classification === classification.id
                  ? 'bg-orange-500 text-white'
                  : 'bg-gray-100 text-gray-700'
              "
              @click="form.classification = classification.id"
            >
              {{ classification.cateName }}
            </view>
          </view>
        </view>

        <view class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">
            商家名称
            <text class="text-red-500">*</text>
          </label>
          <input
            v-model="form.name"
            type="text"
            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
            placeholder="请输入商家全称"
            required
          />
        </view>

        <view class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">
            地址
            <text class="text-red-500">*</text>
          </label>
          <view class="flex">
            <input
              v-model="form.address"
              type="text"
              class="flex-1 border border-gray-300 rounded-l-lg px-3 py-2 text-sm"
              placeholder="请输入详细地址"
              required
            />
            <view
              type="view"
              class="bg-orange-500 text-white px-3 py-2 rounded-r-lg text-sm flex items-center"
              @click="openLocationPicker"
            >
              <MapPin class="w-4 h-4 mr-1" />
              定位
            </view>
          </view>
        </view>

        <view class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">联系电话</label>
          <input
            v-model="form.phone"
            type="tel"
            class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
            placeholder="请输入商家联系电话"
          />
        </view>

        <view class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">人均消费</label>
          <view class="flex items-center">
            <view class="text-sm text-gray-500 mr-2">¥</view>
            <input
              v-model="form.perCapita"
              type="number"
              class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
              placeholder="请输入人均消费金额"
              min="0"
            />
            <view class="text-sm text-gray-500 ml-2">元/人</view>
          </view>
        </view>

        <view class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">
            推荐理由
            <text class="text-red-500">*</text>
          </label>
          <textarea
            v-model="form.reason"
            class="w-full border border-gray-300 rounded-lg box-border px-3 py-2 text-sm h-24"
            placeholder="请详细描述您推荐该商家的理由，如特色菜品、服务体验、环境氛围等"
            required
          ></textarea>
        </view>

        <view class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">特色标签</label>
          <view class="text-xs text-gray-500 mb-2">选择适合该商家的特色标签（可多选）</view>

          <view class="flex flex-wrap gap-2">
            <view
              v-for="(tag, index) in featureTags"
              :key="index"
              type="view"
              class="px-3 py-1.5 rounded-full text-xs transition-colors"
              :class="
                form.label.includes(tag.value)
                  ? 'bg-orange-500 text-white'
                  : 'bg-gray-100 text-gray-700'
              "
              @click="toggleTag(tag.value)"
            >
              {{ tag.label }}
            </view>
          </view>
        </view>

        <view class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">评测项目（选填）</label>

          <view class="space-y-3 bg-gray-50 p-3 rounded-lg">
            <view>
              <view class="flex justify-between items-center mb-1">
                <view class="text-sm text-gray-700">环境</view>
                <view class="flex">
                  <Star
                    v-for="i in 5"
                    :key="i"
                    class="w-5 h-5 cursor-pointer"
                    :class="i <= form.ratings.environment ? 'text-orange-400' : 'text-gray-300'"
                    @click="form.ratings.environment = i"
                  />
                </view>
              </view>
            </view>

            <view>
              <view class="flex justify-between items-center mb-1">
                <view class="text-sm text-gray-700">服务</view>
                <view class="flex">
                  <Star
                    v-for="i in 5"
                    :key="i"
                    class="w-5 h-5 cursor-pointer"
                    :class="i <= form.ratings.service ? 'text-orange-400' : 'text-gray-300'"
                    @click="form.ratings.service = i"
                  />
                </view>
              </view>
            </view>

            <view>
              <view class="flex justify-between items-center mb-1">
                <view class="text-sm text-gray-700">口味</view>
                <view class="flex">
                  <Star
                    v-for="i in 5"
                    :key="i"
                    class="w-5 h-5 cursor-pointer"
                    :class="i <= form.ratings.taste ? 'text-orange-400' : 'text-gray-300'"
                    @click="form.ratings.taste = i"
                  />
                </view>
              </view>
            </view>

            <view>
              <view class="flex justify-between items-center mb-1">
                <view class="text-sm text-gray-700">性价比</view>
                <view class="flex">
                  <Star
                    v-for="i in 5"
                    :key="i"
                    class="w-5 h-5 cursor-pointer"
                    :class="i <= form.ratings.value ? 'text-orange-400' : 'text-gray-300'"
                    @click="form.ratings.value = i"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="mb-2">
          <label class="block text-sm font-medium text-gray-700 mb-1">上传照片</label>
          <view class="text-xs text-gray-500 mb-2">
            上传商家环境、菜品或服务照片，最多可上传5张
          </view>

          <view class="grid grid-cols-5 gap-2">
            <view
              v-for="(photo, index) in form.photos"
              :key="index"
              class="aspect-square rounded-lg border border-gray-200 overflow-hidden relative"
            >
              <img
                :src="photo.url"
                :alt="`Photo ${index + 1}`"
                class="w-full h-full object-cover"
              />
              <view
                type="view"
                class="absolute top-1 right-1 bg-black/50 rounded-full p-1"
                @click="removePhoto(index)"
              >
                <X class="w-3 h-3 text-white" />
              </view>
            </view>

            <view
              v-if="form.photos.length < 5"
              class="aspect-square rounded-lg border border-dashed border-gray-300 flex flex-col items-center justify-center cursor-pointer"
              @click="openPhotoSelector"
            >
              <Plus class="w-5 h-5 text-gray-400" />
              <view class="text-xs text-gray-400 mt-1">添加</view>
            </view>
          </view>
        </view>

        <view class="pt-4 border-t border-gray-100 mb-2">
          <view class="text-base font-medium text-gray-800 mb-3">申请人信息</view>

          <view class="space-y-4">
            <view>
              <label class="block text-sm font-medium text-gray-700 mb-1">
                姓名
                <text class="text-red-500">*</text>
              </label>
              <input
                v-model="form.applicantName"
                type="text"
                class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
                placeholder="请输入您的姓名"
                required
              />
            </view>

            <view>
              <label class="block text-sm font-medium text-gray-700 mb-1">
                电话
                <text class="text-red-500">*</text>
              </label>
              <input
                v-model="form.applicantPhone"
                type="tel"
                class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm"
                placeholder="请输入您的手机号码"
                required
              />
            </view>

            <view class="flex items-center">
              <input
                v-model="form.isAnonymous"
                type="checkbox"
                id="anonymous"
                class="w-4 h-4 text-orange-500 border-gray-300 rounded"
              />
              <label for="anonymous" class="ml-2 text-sm text-gray-700">
                匿名推荐（您的信息仅用于审核联系，不会公开展示）
              </label>
            </view>
          </view>
        </view>

        <view class="pt-4 mb-2">
          <view
            type="submit"
            class="w-full bg-orange-500 text-white py-3 rounded-full font-medium"
            :disabled="isSubmitting"
          >
            <view v-if="isSubmitting" class="flex items-center justify-center">
              <view
                class="w-4 h-4 text-center border-2 border-white border-t-transparent rounded-full animate-spin mr-2"
              ></view>
              提交中...
            </view>
            <view v-else class="text-center">提交</view>
          </view>
        </view>
      </form>
    </view>

    <view
      v-if="showLocationPicker"
      class="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
      @click="showLocationPicker = false"
    >
      <view class="bg-white rounded-lg w-full max-w-md max-h-[80vh] overflow-hidden" @click.stop>
        <view class="p-4 border-b border-gray-100 flex justify-between items-center">
          <view class="font-bold text-gray-800">选择位置</view>
          <view @click="showLocationPicker = false">
            <X class="w-5 h-5 text-gray-500" />
          </view>
        </view>

        <view class="p-4">
          <view class="flex mb-4">
            <input
              type="text"
              class="flex-1 border border-gray-300 rounded-l-lg px-3 py-2 text-sm"
              placeholder="搜索地址"
            />
            <view class="bg-orange-500 text-white px-3 py-2 rounded-r-lg text-sm">搜索</view>
          </view>

          <view class="bg-gray-100 h-64 rounded-lg flex items-center justify-center mb-4">
            <view class="text-center">
              <MapPin class="w-10 h-10 text-gray-400 mx-auto mb-2" />
              <view class="text-gray-500">地图加载中...</view>
            </view>
          </view>

          <view class="max-h-40 overflow-y-auto">
            <view
              v-for="(location, index) in mockLocations"
              :key="index"
              class="flex items-center py-2 border-b border-gray-100 last:border-0 cursor-pointer hover:bg-gray-50"
              @click="selectLocation(location)"
            >
              <MapPin class="w-4 h-4 text-gray-500 mr-2 flex-shrink-0" />
              <view>
                <view class="text-sm font-medium text-gray-800">{{ location.name }}</view>
                <view class="text-xs text-gray-500">{{ location.address }}</view>
              </view>
            </view>
          </view>
        </view>

        <view class="p-4 border-t border-gray-100">
          <view
            class="w-full bg-orange-500 text-white py-2 rounded-lg font-medium"
            @click="confirmLocation"
          >
            确认位置
          </view>
        </view>
      </view>
    </view>

    <view
      v-if="showSuccessModal"
      class="fixed inset-0 bg-black/60 z-40 flex items-center justify-center p-4"
      @click="showSuccessModal = false"
    >
      <view class="bg-white rounded-lg w-full max-w-xs p-4 text-center" @click.stop>
        <view
          class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"
        >
          <CheckCircle class="w-8 h-8 text-green-500" />
        </view>
        <view class="text-lg font-bold text-gray-800 mb-2">推荐成功</view>
        <view class="text-sm text-gray-600 mb-4">
          感谢您的推荐！我们的评审团队将尽快审核并安排探访。
        </view>
        <view
          class="w-full bg-orange-500 text-white py-2 rounded-lg font-medium"
          @click="closeSuccessModal"
        >
          返回首页
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ChevronLeft, MapPin, Plus, X, CheckCircle, Star } from 'lucide-vue-next'
import { http } from '@/utils/http'

const categories = ref([])

const getCategory = async () => {
  let res = await http.get('/api/home/categories', { pid: 0 })
  if (res.code == 200) {
    console.log('res', res)
    categories.value = res.data.categories
  }
}

onLoad(() => {
  getCategory()
})

// Feature label
const featureTags = [
  { label: '性价比高', value: 'value' },
  { label: '味道赞', value: 'taste' },
  { label: '环境好', value: 'environment' },
  { label: '服务周到', value: 'service' },
  { label: '招牌菜', value: 'signature' },
  { label: '特色菜', value: 'special' },
  { label: '创新菜', value: 'innovative' },
  { label: '江湖菜', value: 'street' },
  { label: '深夜营业', value: 'late_night' },
  { label: '适合聚餐', value: 'gathering' },
  { label: '商务宴请', value: 'business' },
  { label: '家庭聚会', value: 'family' },
]

// Form data
const form = reactive({
  classification: '',
  name: '',
  address: '',
  phone: '',
  perCapita: '',
  reason: '',
  label: [],
  ratings: {
    environment: 0,
    service: 0,
    taste: 0,
    value: 0,
  },
  photos: [],
  applicantName: '',
  applicantPhone: '',
  isAnonymous: false,
})

// Toggle tag selection
const toggleTag = (tagValue) => {
  const index = form.label.indexOf(tagValue)
  if (index === -1) {
    form.label.push(tagValue)
  } else {
    form.label.splice(index, 1)
  }
}

// Mock locations for the location picker
const mockLocations = [
  {
    name: '上饶市政府',
    address: '上饶市信州区带湖路1号',
  },
  {
    name: '上饶万达广场',
    address: '上饶市信州区三清山大道与凤凰大道交汇处',
  },
  {
    name: '上饶师范学院',
    address: '上饶市信州区志敏大道399号',
  },
  {
    name: '上饶市人民医院',
    address: '上饶市信州区书院路84号',
  },
]

// UI state
const isSubmitting = ref(false)
const showLocationPicker = ref(false)
const showSuccessModal = ref(false)
const showToast = ref(false)
const toastMessage = ref('')
const selectedLocation = ref(null)

// Open location picker
const openLocationPicker = () => {
  showLocationPicker.value = true
}

// Select a location from the list
const selectLocation = (location) => {
  selectedLocation.value = location
}

// Confirm selected location
const confirmLocation = () => {
  if (selectedLocation.value) {
    form.address = selectedLocation.value.address
    showLocationPicker.value = false
  } else {
    uni.showToast({
      title: '请选择一个位置',
      icon: 'none',
      mask: false,
    })
  }
}

const openPhotoSelector = () => {
  if (form.photos.length < 5) {
    form.photos.push({
      url: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
      file: null,
    })
  }
}

const removePhoto = (index) => {
  form.photos.splice(index, 1)
}

const submitRecommendation = () => {
  if (!form.classification) {
    uni.showToast({
      title: '请选择商家类别',
      icon: 'none',
      mask: false,
    })
    return
  }

  isSubmitting.value = true

  setTimeout(() => {
    isSubmitting.value = false
    showSuccessModal.value = true

    // Reset form
    form.classification = ''
    form.name = ''
    form.address = ''
    form.phone = ''
    form.perCapita = ''
    form.reason = ''
    form.label = []
    form.ratings = {
      environment: 0,
      service: 0,
      taste: 0,
      value: 0,
    }
    form.photos = []
    form.applicantName = ''
    form.applicantPhone = ''
    form.isAnonymous = false
  }, 1500)
}

const closeSuccessModal = () => {
  showSuccessModal.value = false
}

const goBack = () => {
  uni.navigateBack()
}
</script>

<style scoped></style>
